<template>
    <div>
        <div class="main">
            <mt-navbar v-model="selected">
                <mt-tab-item id="1">弹出按钮</mt-tab-item>
                <mt-tab-item id="2">头部展示</mt-tab-item>
                <mt-tab-item id="3">加载按钮</mt-tab-item>
                <mt-tab-item id="4">日期按钮</mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <overview/>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <touheader/>
                </mt-tab-container-item>
                <mt-tab-container-item id="3">
                    <badge/>
                    <indicator/>
                    <switchzu/>
                </mt-tab-container-item>
                <mt-tab-container-item id="4">
                    <dataqi/>
                </mt-tab-container-item>
            </mt-tab-container>
            <!-- <loadmore/> 加载项目 -->
        </div>
        <div class="main">
            <mt-navbar v-model="selected1">
                <mt-tab-item id="5">swipe轮播</mt-tab-item>
                <mt-tab-item id="6">搜索</mt-tab-item>
                <mt-tab-item id="7">复选框</mt-tab-item>
                <mt-tab-item id="8">日期按钮</mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected1">
                <mt-tab-container-item id="5">
                    <swiper/>
                </mt-tab-container-item>
                <mt-tab-container-item id="6">
                    <search/>
                </mt-tab-container-item>
                <mt-tab-container-item id="7">
                    <div class="cl-div">
                        <div class="center">
                            checklist demo
                        </div>
                        <div>
                            <input type="text" placeholder="请选择考场">
                        </div>
                        <checklist :max="1"></checklist>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="8">
                    <dataqi/>
                </mt-tab-container-item>
            </mt-tab-container>
            <!-- <loadmore/> 加载项目 -->
        </div>
    </div>
</template>

<script>
import overview from '@/components/overview.vue'
import touheader from '@/components/header.vue'
import badge from '@/components/badge.vue'
import indicator from '@/components/indicator.vue'
import loadmore from '@/components/loadmore.vue'
import dataqi from '@/components/dataqi.vue'
import switchzu from '@/components/switchzu.vue'

import swiper from '@/components/swiper.vue'
import search from '@/components/search.vue'
import checklist from '@/components/checklist.vue'

export default {
  name: 'page-navbar',
  data () {
    return {
      selected: '1',
      selected1: '5'
    }
  },
  components: {
    overview,
    touheader,
    badge,
    indicator,
    loadmore,
    dataqi,
    switchzu,
    swiper,
    search,
    checklist
  }
}
</script>
<style>
    .mint-tab-container-item{
        margin-top:3%;
        text-align:center;
    }
    .mint-tab-container-item>div{
        margin-bottom:2%;
    }
    .center{
        text-align: center;
        font-size: 18px;
    }
    .cl-div input{
        border:none;
        width:96%;
        margin: 0 auto;
        height:30px;
        line-height:30px;
        color:#333;
    }
</style>
